<!--  -->
<template>
  <div class="time-dialog">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @closed="closed" :close-on-click-modal="false" :modal-append-to-body="false">
      <el-form :model="form" @submit.native.prevent>
        <el-form-item label="时间标题" :label-width="formLabelWidth">
          <el-input size="small" v-model="form.title" autocomplete="off" maxlength="50" style="width:50%;"></el-input>
        </el-form-item>
        <el-form-item label="时间内容" :label-width="formLabelWidth">
          <Ue :id="'timeaxis-editor-' + new Date().getTime()" :defaultStyle="{ 'width': '100%', 'height': '120px' }"
            toolbarsType="componentOthertext" :defaultHeight="200" :defaultValue="form.info" ref="contentref">
          </Ue>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closed">取 消</el-button>
        <el-button size="small" type="primary" @click="sure">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Ue from '@/components/common/ueditor/Ue.vue'
export default {
  data () {
    return {
      dialogFormVisible: false,
      form: {
        title: '',
        info: ''
      },
      formLabelWidth: '75px',
      title: '',
      callback: () => { }
    }
  },
  methods: {
    sure () {
      this.form.title = this.form.title.replace(/(^\s*)|(\s*$)/g, '')
      if (!this.form.title) {
        this.$message.error('时间标题不能为空！')
        return
      }
      if (this.form.title && this.form.title.trim().length > 50) {
        this.$message.error('时间标题不能超过50字！')
        return
      }
      this.form.info = this.$refs['contentref'].getUEContent()
      if (!this.form.info) {
        this.$message.error('时间内容不能为空！')
        return
      }
      this.callback(this.form)
      this.dialogFormVisible = false
    },
    // ....
    open (title, dataItem, callback) {
      this.title = title
      this.callback = callback
      this.form = JSON.parse(JSON.stringify(dataItem))
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['contentref'].setUEContent(this.form.info)
        this.$refs['contentref'].sourcetotext()
      })
    },
    closed () {
      this.title = ''
      this.callback = () => { }
      this.form = {
        title: '',
        info: ''
      }
      this.dialogFormVisible = false
    }
  },
  components: {
    Ue
  }
}

</script>
<style scoped>
.time-dialog {
  position: relative;
  z-index: 1000;
}
</style>
